<template>
  <div class="app">
    <el-card style="width: 480px">
      <template #header>
        <div class="card-header">
          <span>xxx 管理系统</span>
        </div>
      </template>

      <!-- rules 验证规则 -->
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        size="large"
        status-icon
      >
        <!-- v-model="ruleForm.name"  双向绑定对象中name -->
        <!-- prop="name"  表单自带验证功能对哪个属性进行验证-->
        <el-form-item label="用户名" prop="name" label-position="left">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password" label-position="left">
          <el-input v-model="ruleForm.password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>

      <template #footer>xxx--2024</template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import http from "@/untils/http";
//消息提示
import { ElMessage } from "element-plus";
// 引入element-plus里 定义的内置类型
import type { FormInstance, FormRules } from "element-plus";
import router from "@/router";

// 定义接口--限制对象的属性和方法
interface RuleForm {
  name: string;
  password: string;
}

// 定义了对象--表单中每一的数据的初始值

// reactive<RuleForm> 泛型 传入了类型，限制的reactive参数类型
// reactive的参数--要符合 RuleForm 这个接口
const ruleForm = reactive<RuleForm>({
  name: "Hello",
  password: "1234",
});

// 定义的form表单，自带验证规则
// FormRules<RuleForm>  ->  限制的 数组的元素类型
// RuleForm --限制的 reactive 参数的类型
const rules = reactive<FormRules<RuleForm>>({
  // 定义name属性的验证规则
  name: [
    //required 必须
    //message 验证失败的提示
    // trigger  blur 事件名， 失去焦点触发验证规则
    { required: true, message: "Please input Activity name", trigger: "blur" },

    //限制长度的规则  min至少几位  max 最多几位
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  //正则校验-非空字符，至少三位
  password: [
    { required: true, pattern: /^\S{3,}$/, message: "非空字符，至少三位" },
  ],
});

// 通过模板中ref 绑定 组件实例form
// ref<FormInstance>  <泛型>
// ref函数中使用泛型--指定ref参数的类型=返回值的类型
const ruleFormRef = ref<FormInstance>();

// interface IResUserData {
//   code: string
//   message: string
//   data: {
//     adminname: string
//     token: string
//   }
// }

// interface IUserData {
//   code: string
//   message: string
//   data: {
//     adminname: string
//     token: string
//   }
// }
// interface IResUserDataData {
//   code: string
//   message: string
//   data:IUserData
// }

// 可以类型声明，放入xx.d.ts文件 类型声明文件
// interface IResUserData {
//   adminname: string
//   token: string
// }

// // 定义了泛型参数T，
// // 使用这个接口的时候，要传入泛型参数 （具体的类型），这个具体的类型就会限制data的类型
// interface IResData<T> {
//   code: string
//   message: string
//   data: T
// }

//登录按钮的处理函数
async function submitForm(formEl: FormInstance | undefined) {
  console.log(formEl);
  if (!formEl) return;
  // 调用验证函数
  await formEl.validate((valid, fields) => {
    console.log(valid); //验证结果 布尔值
    if (valid) {
      console.log("submit!");
      console.log(ruleForm.password);
      console.log(ruleForm.name);
      //发起一个ajax请求--登陆请求
      http({
        url: "/admin/admin/login",
        method: "post",
        data: { adminname: ruleForm.name, password: ruleForm.password },
      }).then((r) => {
        console.log(r.data);
        if (r.data.code == 200) {
          ElMessage({
            message: r.data.message,
            type: "success",
          });
          //弹出提示--注册成功
          console.log(r.data.message);
          // as 类型推断
          // const data = r.data as IResData<IResUserData>;
          // 定义的时候直接声明类型
          // const data: IResData<IResUserData> = r.data;
          // const data = r.data as IResData<IResUserData>;
          // data.data.token

          // r.data
          localStorage.setItem("xxMallAdminToken", r.data.data.token);
          localStorage.setItem("xxMallAdminName", r.data.data.adminname);
          router.push("/Home");
        } else {
          console.log(r.data.message);
          ElMessage({
            message: r.data.message,
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
}
function resetForm(formEl: FormInstance | undefined) {
  console.log(formEl);
  if (!formEl) return;
  //formEl form组件实例 自带的重置方法
  formEl.resetFields();
}
</script>
<style lang="scss">
.app {
  height: 100%;
  // background-image: url(@/assets/bg.jpg);
  background-image: url(../assets/bg.jpg);
  display: flex;
  .el-card {
    margin: auto;
  }
}
</style>
